<template>
    <div class="hospital-container">
      <el-card>
        <div class="header-container">
          <span class="hospital-title">
            <i class="el-icon-office-building"></i> 医院信息
          </span>
          <el-button type="text" icon="el-icon-edit" @click="toggleEditMode">修改信息</el-button>
        </div>
        <el-form :model="hospitalForm" ref="hospitalForm" :rules="rules" label-width="80px" v-show="editMode">
          <!-- Input fields for editing -->
          <el-form-item label="医院名称" prop="name">
            <el-input v-model="hospitalForm.name"></el-input>
          </el-form-item>
          <el-form-item label="医院地址" prop="address">
            <el-input v-model="hospitalForm.address"></el-input>
          </el-form-item>
          <el-form-item label="医院联系电话" prop="phone">
            <el-input v-model="hospitalForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="医院邮箱" prop="email">
            <el-input v-model="hospitalForm.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('hospitalForm')">
              <i class="el-icon-check"></i> 保存
            </el-button>
          </el-form-item>
        </el-form>
        <div v-show="!editMode" class="static-info-container">
          <!-- Display static hospital information -->
          <el-descriptions title="医院信息">
            <el-descriptions-item label="医院名称">
              <i class="el-icon-office-building"></i> {{ hospitalForm.name }}
            </el-descriptions-item>
            <el-descriptions-item label="医院地址">
              <i class="el-icon-location"></i> {{ hospitalForm.address }}
            </el-descriptions-item>
            <el-descriptions-item label="医院联系电话">
              <i class="el-icon-phone"></i> {{ hospitalForm.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="医院邮箱">
              <i class="el-icon-message"></i> {{ hospitalForm.email }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        editMode: false,
        hospitalForm: {
          name: '',
          address: '',
          phone: '',
          email: ''
        },
        rules: {
          name: [{ required: true, message: '请输入医院名称', trigger: 'blur' }],
          address: [{ required: true, message: '请输入医院地址', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入医院联系电话', trigger: 'blur' }],
          email: [{ required: true, message: '请输入医院邮箱', trigger: 'blur' }]
        }
      };
    },
    created() {
      // Fetch hospital information when the component is created
      this.fetchHospitalInformation();
    },
    methods: {
      async fetchHospitalInformation() {
        try {
          const response = await axios.get('http://127.0.0.1:3000/api/hospital');
          this.hospitalForm = response.data[0];
        } catch (error) {
          console.error('Error:', error);
        }
      },
      async toggleEditMode() {
        // Toggle edit mode and fetch hospital information when exiting edit mode
        this.editMode = !this.editMode;
  
        if (!this.editMode) {
          await this.fetchHospitalInformation();
        }
      },
      async submitForm(formName) {
        const isValid = await this.$refs[formName].validate();
  
        if (isValid) {
          try {
            if (this.editMode) {
              // Update hospital information if in edit mode
              const response = await axios.put('http://127.0.0.1:3000/api/hospital', this.hospitalForm);
              console.log('Hospital information updated:', response.data);
            }
  
            this.toggleEditMode();
          } catch (error) {
            console.error('Error:', error);
          }
        } else {
          console.log('Validation failed');
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .hospital-container {
    margin: 20px;
  }
  
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .hospital-title {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  
  .hospital-title i {
    margin-right: 8px;
    font-size: 24px;
  }
  
  .static-info-container {
    margin-top: 20px;
  }
  </style>
  